<!--
 * @Author: 刘美红 liumeihong@llootong.com
 * @Date: 2025-04-07 09:55:59
 * @LastEditors: 刘美红 liumeihong@llootong.com
 * @LastEditTime: 2025-04-15 18:38:13
 * @FilePath: \gzt-template\src\pages\zlcj\component\sf.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="sf-content">
    <img class="img" src="../../../assets/images/Artificial.png" />
    <div class="text-info">
      <p class="title">{{ info.title }}</p>
      <p class="text">
        {{ info.description }}
      </p>
    </div>
  </div>
</template>

<script setup>
import { MinxfunCoulmns } from './device.js';
import { getEventAlgorithm } from '@/api/zlcj.js';
import { onMounted } from 'vue';
const { findSenceType } = MinxfunCoulmns();
const route = useRoute();
let info = ref({});
const getData = async () => {
  try {
    let { data } = await getEventAlgorithm({
      sceneCode: await findSenceType(route.params.id),
    });
    info.value = data;
  } catch (e) {
    console.error(e);
  }
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss">
.sf-content {
  padding: 20px;
  width: 450px;
  height: 11%;
  background: #ffffff;
  box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
  border-radius: 12px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .img {
    width: 30%;
    height: 100%;
  }
  .text-info {
    flex: 1;
    margin-left: 24px;
    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 14px;
      color: #2263bf;
    }
    .text {
      margin-top: 1%;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 12px;
      color: #666666;
      display: -webkit-box; /* 使用弹性盒子模型 */
      -webkit-box-orient: vertical; /* 设置垂直方向 */
      -webkit-line-clamp: 2; /* 限制显示的行数 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
      word-break: break-all; /* 允许在单词内换行（可选） */
    }
  }
}
</style>
